import React, { useEffect, useState } from 'react';
import DescriptionsCondition from '@/components/DescriptionsCondition';
import DrawerCondition from '@/components/DrawerCondition';
import PopImgShow from '@/components/PopImgShow';
import { connect } from 'umi';
import { Space, Button, Card } from 'antd'
import { order_status, goodsType_status, operation_statusinfo, workType_status, stage_tab } from '@/common/contact';
import ModelForm from './components/ModelForm'
import Detail from './../../../OrderList/components/CardMask/components/detail'
import PayDetail from './../../../OrderList/components/CardMask/components/payDetail';
const PointDetail = (props) => {
  const { dispatch, visible = {}, onClose, handleCallback, loading } = props;
  const { show = false, detail = {}, record = {} } = visible;
  const { orderInfo = {}, detailOrderPayRecordList = [], detailCommissionItemSnapshotList = [] } = detail
  const [active, setActive] = useState('detail');
  console.log(visible)
  const [modelVisible, setModelVisible] = useState(false)
  useEffect(() => {
    if (!show) {
      setActive('detail')
    }
  }, [show])
  const tabList = [

    {
      key: 'detail',
      tab: '详情',
    },
    {
      key: 'payDetail',
      tab: '支付信息',
    },

  ];
  const onTabChange = (key) => {
    setActive(key);
  };
  const contentList = {
    payDetail: <PayDetail list={detailOrderPayRecordList}></PayDetail>,
    detail: <Detail detail={orderInfo}></Detail>,
    // commissionDetail: <CommissionDetail show={show} handleCallback={handleCallback} onClose={onClose} orderInfo={orderInfo} list={detailCommissionItemSnapshotList}></CommissionDetail>
  };
  const modalProps = {
    title: `订单详情`,
    visible: show,
    onClose,
    footer: <Space>
      <Button onClick={() => setModelVisible({
        show: true,
        detail: record
      })} type='primary'>审核</Button>
    </Space>
  };
  return (
    <DrawerCondition {...modalProps}>
      <Card
        style={{
          width: '100%',
        }}
        tabList={tabList}
        activeTabKey={active}
        onTabChange={(key) => {
          onTabChange(key);
        }}
      >
        {contentList[active]}
      </Card>
      <ModelForm handleCallback={handleCallback} visible={modelVisible} onClose={() => setModelVisible(false)}></ModelForm>
    </DrawerCondition>

  );
};
export default connect(({ subscriber, loading }) => ({
  loading: loading.effects['subscriber/fetchUserDetail'],
}))(PointDetail);;
